.container{
    height: 1020px;
    width: 1900px;
    font-size: 30px;
    background: url(../images/background.png);
    text-align: center;
    margin-left: -115px;
}
.middle{
    width: 63%;
    height: 81.5%;
    background: #fff;
    display: flex;
}
.middle>nav{
    width: 20.8%;
    background: #477bd1;
    text-align: center;
}
.navbar{
    width: 100%;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
} 
.nav-item>a{
    color: #fff;
}
.nav-item{
    width: 80%;
    border-top-right-radius: 27.6px;
    border-bottom-right-radius: 27.6px;
    color: #fff;
    position: relative;
}
.nav-item:hover{
    background: #9eb9e7;
    border-right: 30px solid #dfd2f2;
}
.toggle{
    border-radius: 10px;
    width: 9rem;
    background: #fff;
    position: absolute;
    left: 100%;
    font-size: 18px;
    display: none;
}
.toggle:hover{
    display: block;
    cursor: pointer;
}
.toggle a{
    color: #000;
}
.toggle a:focus{
    color: rgb(149, 162, 175);
}
.nav-item:hover .toggle{
    display: block;
}
.profilePhoto{
    height: 80px;
    width: 80px;
    background: url(../images/云腾.jpg) center no-repeat;
    border-radius: 50%;
}
.nav>button{
    font-size: 20px;
    height: 3.9%;
    width: 29.4%;
    color: #ec2b2b;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #ec2b2b;
}
.middle>div{
    width: 79.1%;
}
.welcome{
    position: relative;
    display: block;/*开始默认显示页面*/
}
.fontdemo{
    position: absolute;
    left: 90px;
    font-size: 48px;
}
.font{
    position: absolute;
    left: 90px;
    top: 70px;
    font-size: 36px;
}
.helloUser{
    width: 100%;
    height: 100%;
    background: url(../images/welcome111.png) no-repeat center;
}
button{
    width: 80px;
    height: 30px;
    color: #6c6d72;
    border-radius: 20px;
    background: #f0f1fd;
}
input{
    height: 30px;
    border: 1px solid #000;
}
.book-condition{
    text-align: left;
    color: #666666;
    background: #c1baf3;
    display: none;
}
.book-condition>div{
    font-size: 16px;
    color: #000;
}
.borrowed{
    text-align: left;
    color: #666666;
    background: #c1baf3;
    display: none;
}
.borrow-hobby{
    text-align: left;
    color: #666666;
    background: #c1baf3;
    display: none;
}
legend{
    text-align: center;
}
.sheet{
    color: #000;
    border:1px solid #76acfb;
    border-top: 50px solid #c9e5fe;
    width: 60%;
    border-radius: 20px;
    background: #fff;
}
.borrow-car{
    background: #d6dfc8;
    display: none;
}
.book-return{
    background: #e8d5f4;
    display: none;
}
.myInformation{
    background: #a9def4;
    display: none;
}
.myInformation>div{
    color: #666666;
}
.information{
    height: 80%;
    width: 50%;
    background: #fff;
}
.information>form{
    line-height: 70px;
}
.rigisterSheet{
    text-align: left;
    color: #666666;
    background: #a9def4;
    display: none;
}
.rigister{
    width: 75%;
    height: 30%;
    background: #fff;
    display: none;
}
.recommend{
    text-align: left;
    color: #666666;
    background: #afc2b8;
    display: none;
}
.donation-book{
    text-align: left;
    color: #000;
    background: #c7acb2;
    display: none;
}
.book-distribution{
    text-align:left;
    color: #666666;
    background: #bcd9c7;
    display: none;
}
.user-guide{
    text-align: left;
    color: #666666;
    background: #c6d4ea;
    display: none;
}

